<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>CSS Color 4: Computed value of color-contrast()</title>
  <link rel="author" title="Jan Keitel" href="mailto:jkeitel@google.com">
  <link rel="help" href="https://www.w3.org/TR/css-color-4/#css-system-colors">
  <meta name="assert" content="computed style of form elements is consistent with definition of system colors">
  <script src="/resources/testharness.js"></script>
  <script src="/resources/testharnessreport.js"></script>
  <script src="/css/support/computed-testcommon.js"></script>
</head>

<body>
  <div style="display: none">
  <div id="target"></div>
  <!-- Reference elements -->
  <!-- Buttons -->
  <div id="buttons">
    <button name="button"></button><input type="submit" name="submit button">
    <input type="reset" name="reset button"><input type="color" name="color picker">
  </div>
  <!-- Input elements -->
  <div id="fields">
    <input type="text" name="text field"><input type="password" name="password field">
    <input type="email" name="email field"><input type="number" name="number field">
    <input type="date" name="date field">
    <textarea name="text area"></textarea>
  </div>
  <mark id="mark">Marked text</mark>
  <!-- Link -->
  <a href="#" id="link">Link</a>
  </div>

  <script>
    ['light', 'dark'].forEach(colorScheme => {
      document.documentElement.style.colorScheme = colorScheme;

      // Buttons
      for (let element of document.getElementById("buttons").children) {
        style = document.defaultView.getComputedStyle(element);
        test_computed_value('color', 'ButtonBorder', style.getPropertyValue('border-color'), `resolves to the same color as the border-color of a ${element.name} (${colorScheme})`);
        test_computed_value('color', 'ButtonFace', style.getPropertyValue('background-color'), `resolves to the same color as the background-color of a ${element.name} (${colorScheme})`);
        test_computed_value('color', 'ButtonText', style.getPropertyValue('color'), `resolves to the same color as text on a ${element.name} (${colorScheme})`);
      }

      // CanvasText
      style = document.defaultView.getComputedStyle(document.getElementsByTagName('html')[0]);
      test_computed_value('color', 'CanvasText', style.getPropertyValue('color'), `has the same color as the color of the html element (${colorScheme})`);

      // Field and FieldText
      for (let element of document.getElementById("fields").children) {
        style = document.defaultView.getComputedStyle(element);
        test_computed_value('color', 'Field', style.getPropertyValue('background-color'), `resolves to the same color as the background-color of a ${element.name} (${colorScheme})`);
        test_computed_value('color', 'FieldText', style.getPropertyValue('color'), `resolves to the same color as text on a ${element.name} (${colorScheme})`);
      }

      // Mark and MarkText
      style = document.defaultView.getComputedStyle(document.getElementById('mark'));
      test_computed_value('color', 'Mark', style.getPropertyValue('background-color'), `has the same color as the background-color of a mark element (${colorScheme})`);
      test_computed_value('color', 'MarkText', style.getPropertyValue('color'), `has the same color as the color of a mark element (${colorScheme})`);

      // LinkText
      style = document.defaultView.getComputedStyle(document.getElementById('link'));
      test_computed_value('color', 'LinkText', style.getPropertyValue('color'), `has the same color as the color of an anchor element (${colorScheme})`);
    });
  </script>
</body>

</html>
